<template>
  <view class="container">
    <page-header title="乌苏市烟草零售许可证" start-color="#39c5bb" end-color="#398dee" height="50rpx">
      <text slot="title" class="banner-text">办理轮候服务</text>
    </page-header>
    <!-- 通知公告 -->
    <view class="notice-bar" @click="navigateToDetail(firstNotice.noticeId)">
      <view class="notice-icon">
        <uni-icons type="sound-filled" color="ff4757" size="20"></uni-icons>
      </view>
      <view class="notice-content">
        <text class="uv-line-1">{{firstNotice.noticeTitle}}</text>
      </view>
	  <wd-tag mark type="warning" custom-class="morenotice" @click="navigateToNoticeList(1)">更多</wd-tag>
	  <!-- <text class="more" @click="navigateToNoticeList(1)">更多 ></text> -->
    </view>

    <!-- 办事指南 -->
    <view class="card-section">
      <view class="section-header">
        <text class="section-title">办事指南</text>
        <text class="more" @click="navigateToNoticeList(2)">更多 ></text>
      </view>
      <view class="guide-item" v-if="firstGuide.noticeId" @click="navigateToDetail(firstGuide.noticeId)">
        <text class="guide-text">{{ firstGuide.noticeTitle }}</text>
		<text class="guide-date mt-5">{{ firstGuide.createTime }}</text>
      </view>
      <view class="guide-item" v-else>
        <text class="guide-text">暂无信息</text>
      </view>
    </view>

    <!-- 功能按钮 -->
    <view class="card-section">
      <view class="function-buttons">
        <view class="base-button gradient-red" style="margin-right: 15rpx" @click="handleQueue">
          <text class="btn-title">我要排队</text>
          <text class="sub-text">在线排队 到号通知</text>
        </view>
        <view class="base-button gradient-blue" style="margin-left: 15rpx" @click="handleQuery">
          <text class="btn-title">查询</text>
          <text class="sub-text">管理申请 查询进度</text>
        </view>
      </view>
    </view>

    <!-- 合理布局公示 -->
    <view class="card-section">
      <view class="section-title">合理布局公示</view>
      <view class="grid-layout">
        <view class="layout-item" v-for="(item, index) in 5" :key="index">
          <view class="base-icon" :class="'layout-icon-' + (index + 1)" @click="handleLayout(index)">
            <wd-icon :name="['fork', 'chat1', 'time', 'check-circle-filled', 'chat'][index]" color="#fff" size="40rpx"></wd-icon>
          </view>
          <text>{{ ['零售点布局', '留言咨询', '排队中', '已排到', '智能客服'][index] }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'
import { getNoticeFirst } from '@/api/notice'
import { navigateToDetail } from '@/hooks'

const firstGuide = ref({})
const firstNotice = ref({})

const fetchGuideList = async () => {
  const res = await getNoticeFirst({noticeType:2})
  if (res.code === 200 && res.data) {
    firstGuide.value = res.data
  }
}

const fetchNoticeList = async () => {
  const res = await getNoticeFirst({noticeType:1})
  if (res.code === 200 && res.data) {
    firstNotice.value = res.data
  }
}


const handleQueue = () => {
  // 处理排队逻辑
  console.log('排队')
}

const handleQuery = () => {
  // 处理查询逻辑
  //   console.log('查询')
  //   uni.navigateTo({
  //     url: '/pages/my/my'
  //   })
}

// 办事指南列表
const navigateToNoticeList = (type=2) => {
  uni.navigateTo({
    url: `/pages/notice/list?type=${type}`
  })
}

const handleLayout = (index) => {
  switch (index) {
    case 0:
      uni.navigateTo({
		url: '/pages/plangrid/plangrid'
	  })
      break
    case 1:
      uni.navigateTo({
        url: '/pages/feedback/feedback'
      })
      break
    case 2:
      handleQueue()
      break
    case 3:
      navigateToDetail(firstNotice.value)
      break
    case 4:
      uni.navigateTo({
        url: '/pages/ai-chat/index'
      })
      break
    default:
      break
  }
}

onMounted(() => {
  fetchNoticeList()
  fetchGuideList()
})
</script>

<style lang="scss">
@import '@/styles/common.scss';

.banner-text {
  font-size: 44rpx;
  font-weight: bold;
  line-height: 1.6;
  color: white;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  display: block;
  letter-spacing: 2rpx;
}

.notice-bar {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background-color: #fff;
  margin: 20rpx 0;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
  .notice-content {
	flex:1;
    font-size: 24rpx;
    color: #ff4757;
  }
}

.notice-icon {
  margin-right: 20rpx;
  color: #f5a623;
  padding-top: 2rpx;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.card-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 20rpx;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 28rpx;
    background: linear-gradient(to bottom, #4a90e2, #87ceeb);
    border-radius: 3rpx;
  }
}

.more {
  color: #666;
  font-size: 26rpx;
}

.guide-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
  transition: all 0.3s ease;

  &:active {
    background-color: #f9f9f9;
  }
}

.guide-date {
  color: #999;
  font-size: 24rpx;
}

.guide-text {
  font-size: 28rpx;
  color: #333;
}

.function-buttons {
  display: flex;
  justify-content: space-between;
  margin: 0;

  .base-button {
    width: 48%;
    min-height: 100rpx;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    }

    .btn-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
      display: block;
    }

    .sub-text {
      font-size: 24rpx;
      opacity: 0.9;
    }
  }
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-top: 20rpx;
}

.layout-item {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
  }

  text {
    margin-top: 16rpx;
    font-size: 28rpx;
    color: #333;
  }
}

.base-icon {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;

  &:active {
    transform: scale(0.95);
  }
}

.layout-icon-1 {
  background: linear-gradient(135deg, #39c5bb, #4fd1c5);
}

.layout-icon-2 {
  background: linear-gradient(135deg, #9c27b0, #ba68c8);
}

.layout-icon-3 {
  background: linear-gradient(135deg, #ff9800, #ffa726);
}

.layout-icon-4 {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
}

.layout-icon-5 {
  background: linear-gradient(135deg, #39c5bb, #4fd1c5);
}
:deep(.morenotice) {
	font-size: 24rpx !important;
}
</style>
